.checkbox {
  display: flex;
  align-items: center;
  min-width: fit-content;
  width: fit-content;
  cursor: pointer;
  gap: var(--inner-spacing-2);

  [data-icon] {
    --checkbox-border-width: var(--border-width-2);
    --checkbox-border-color: var(--color-bd-neutral);
    --checkbox-bg-color: var(--color-bg-accent);
    /* Note: we are using box-shadow as the border to avoid the border from
    changing the size of the checkbox and icon */
    --checkbox-box-shadow: 0px 0px 0px var(--checkbox-border-width)
      var(--checkbox-border-color) inset;

    /**
      Checkbox icon are positioned absolutely because we need to align the elements along the baseline
      but icon takes more space than the text content.
    */
    width: var(--sizing-5);
    height: var(--sizing-5);
    box-shadow: var(--checkbox-box-shadow);
    border-radius: clamp(0px, var(--border-radius-elevation-3), 25%);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    flex-shrink: 0;
  }

  &[data-hovered]:not([data-disabled]) [data-icon] {
    --checkbox-border-color: var(--color-bd-neutral-hover);
  }

  & [data-inline-label-necessity-indicator-icon] {
    color: var(--color-fg-negative);
    margin-inline-start: var(--inner-spacing-1);
  }

  /**
  * ----------------------------------------------------------------------------
  * LABEL POSITION
  *-----------------------------------------------------------------------------
  */
  &[data-label-position="start"] {
    flex-direction: row-reverse;
    justify-content: start;
  }

  /**
 * ----------------------------------------------------------------------------
 * CHECKED  AND INDETERMINATE - BUT NOT DISABLED
 *-----------------------------------------------------------------------------
 */
  &[data-selected] [data-icon],
  &[data-indeterminate] [data-icon] {
    --checkbox-border-color: var(--color-bg-accent);

    background-color: var(--checkbox-bg-color);
    color: var(--color-fg-on-accent);
  }

  &[data-hovered][data-selected]:not([data-disabled], [data-invalid])
    [data-icon],
  &[data-hovered][data-indeterminate]:not([data-disabled], [data-invalid])
    [data-icon] {
    --checkbox-border-color: var(--color-bg-accent-hover);
    --checkbox-bg-color: var(--color-bg-accent-hover);

    background-color: var(--checkbox-bg-color);
    color: var(--color-fg-on-accent);
  }

  /**
  * ----------------------------------------------------------------------------
  * FOCUS
  *-----------------------------------------------------------------------------
  */
  &[data-focus-visible] [data-icon] {
    box-shadow:
      var(--checkbox-box-shadow),
      0 0 0 2px var(--color-bg),
      0 0 0 4px var(--color-bd-focus);
  }

  /**
  * ----------------------------------------------------------------------------
  * ERROR ( INVALID )
  *-----------------------------------------------------------------------------
  */
  &[data-invalid] [data-icon] {
    --checkbox-border-color: var(--color-bd-negative);
    --checkbox-bg-color: var(--color-bd-negative);
  }

  &[data-invalid][data-selected="true"] [data-icon] {
    --checkbox-border-color: var(--color-bg-negative);
    --checkbox-bg-color: var(--color-bg-negative);
  }

  &[data-hovered][data-invalid] [data-icon] {
    --checkbox-border-color: var(--color-bd-negative-hover);
    --checkbox-bg-color: var(--color-bd-negative-hover);
  }

  &[data-hovered][data-selected="true"] [data-icon] {
    --checkbox-border-color: var(--color-bg-negative-hover);
    --checkbox-bg-color: var(--color-bg-negative-hover);
  }

  /**
  * ----------------------------------------------------------------------------
  * DISABLED
  *-----------------------------------------------------------------------------
  */
  &[data-disabled] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
  }
}
